<!doctype html>
<!-- The DOCTYPE declaration above will set the     -->
<!-- browser's rendering engine into                -->
<!-- "Standards Mode". Replacing this declaration   -->
<!-- with a "Quirks Mode" doctype is not supported. -->

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--                                                               -->
<!-- Consider inlining CSS to reduce the number of requested files -->
<!--                                                               -->
<link type="text/css" rel="stylesheet" href="BookRecommendation.css">
<link href="recommend.css" rel="stylesheet" type="text/css">

<!--                                           -->
<!-- Any title is fine                         -->
<!--                                           -->
<title>::: BOOK RECOMMENDATIONS :::</title>

<!--                                           -->
<!-- This script loads your compiled module.   -->
<!-- If you add any GWT meta tags, they must   -->
<!-- be added before this line.                -->
<!--                                           -->
<script type="text/javascript" language="javascript"
	src="bookrecommendation/bookrecommendation.nocache.js"></script>
</head>

<!--                                           -->
<!-- The body can have arbitrary html, or      -->
<!-- you can leave the body empty if you want  -->
<!-- to create a completely dynamic UI.        -->
<!--                                           -->
<body>

	<!-- OPTIONAL: include this if you want history support -->
	<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
		style="position: absolute; width: 0; height: 0; border: 0"></iframe>

	<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
	<noscript>
		<div
			style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
			Your web browser must have JavaScript enabled in order for this
			application to display correctly.</div>
	</noscript>



	<div id="fb-root"></div>
	<script src="http://connect.facebook.net/en_US/all.js"></script>
	
	<div id="loginButton"></div>

	<div id="content">
		<div id="header">
			<h1>recommended for</h1>
			<div id="searchformwrapper">
				<form name="form1" method="post" action="" id="searchform">
					<label> <input type="text" name="search" id="searchfield"
						value="search for a book..."> </label>
				</form>
			</div>
			<div id="username"></div>
		</div>
		
		<div id="left-column">
			<h2>books recommended for you</h2>
			<div id="recommended-books">


				<div class="book">
					<span class="orange bold">Diary of a Wimpy Kid: Cabin Fever</span>

					<img
						src="http://ecx.images-amazon.com/images/I/51h7wav9WVL._SL160_.jpg"
						class="bookimage" /> <br>Jeff Kinney, 2011 <br> <br>
					Buy on Amazon: <span class="orange">$ 10.20</span> <br /> <span
						class="orange bold smaller">why is this recommended?</span>

				</div>

				<div class="book">
					<span class="orange bold">Outliers: The Story of Success</span> <img
						src="http://ecx.images-amazon.com/images/I/41h5QL0vVEL._SL160_PIsitb-sticker-arrow-dp,TopRight,12,-18_SH30_OU01_.jpg"
						class="bookimage" /> <br>Malcom Gladwell, 2008 <br>
					<br> Buy on Amazon: <span class="orange">$ 9.70 </span> <br />
					<span class="orange bold smaller">why is this recommended?</span>

				</div>

				<div class="book">
					<span class="orange bold">Sarah's Key</span> <img
						src="http://ecx.images-amazon.com/images/I/51oboWYxjTL._SL160_PIsitb-sticker-arrow-dp,TopRight,12,-18_SH30_OU01_.jpg"
						class="bookimage" /> <br>Tatiana de Rosnay, 2008 <br>
					<br> Buy on Amazon: <span class="orange">$ 8.37</span> <br />
					<span class="orange bold smaller">why is this recommended?</span>

				</div>

				<div class="book">
					<span class="orange bold"> The Magic of Reality: <br /> How
						We Know What's Really True</span> <img
						src="http://ecx.images-amazon.com/images/I/514nC%2BHLcaL._SL160_.jpg"
						class="bookimage" /> <br>Richard Dawkins and Dave McKean,
					2011 <br>
					<br> Buy on Amazon: <span class="orange">$ 17.99</span><br>
					<span class="orange bold smaller">why is this recommended?</span>
				</div>




			</div>
			<div class="showmore">
				<br> show more recommended books
			</div>
		</div>
		<div id="right-column">
			<div id="friends-list">
				<h2>books your friends like</h2>
				<div id="friends-books">


					<div class="book">
						<span class="orange bold">Sarah's Key</span> <img
							src="http://ecx.images-amazon.com/images/I/51oboWYxjTL._SL160_PIsitb-sticker-arrow-dp,TopRight,12,-18_SH30_OU01_.jpg"
							class="bookimage" /> <br> <img src="fb10friends.png"
							class="fbfriends" />
					</div>

					<div class="book">
						<span class="orange bold">The Hobbit</span> <img
							src="http://ecx.images-amazon.com/images/I/310A2RBYEJL._AA160_.jpg"
							class="bookimage" /> <br> <img src="fb7friends.jpg"
							class="fbfriends" />
					</div>

					<div class="book">
						<span class="orange bold">The Deathly Hallows Pt. 2</span> <img
							src="http://ecx.images-amazon.com/images/I/31HaoI4b90L._AA160_.jpg"
							class="bookimage" /> <br> <img src="fb5friends.jpg"
							class="fbfriends5" />
					</div>

					<div class="book">
						<span class="orange bold">The Help</span> <img
							src="http://ecx.images-amazon.com/images/I/51K-8br8XfL._SL160_PIsitb-sticker-arrow-dp,TopRight,12,-18_SH30_OU01_.jpg"
							class="bookimage" /> <br> <img src="fb3friends.png"
							class="fbfriends3" />
					</div>





				</div>
			</div>

			<div id="public-list">
				<h2>most popular books</h2>
				<div id="popular-books">


					<div id="bookgrid">
						<img
							src="http://ecx.images-amazon.com/images/I/61qQR7qMMLL._SL160_PIsitb-sticker-arrow-dp,TopRight,12,-18_SH30_OU01_.jpg" />

						<img
							src="http://ecx.images-amazon.com/images/I/417j%2BZhErcL._SL160_.jpg" />

						<img
							src="http://ecx.images-amazon.com/images/I/51baYhy3pZL._SL160_PIsitb-sticker-arrow-dp,TopRight,12,-18_SH30_OU01_.jpg" />

						<img
							src="http://ecx.images-amazon.com/images/I/51oboWYxjTL._SL160_PIsitb-sticker-arrow-dp,TopRight,12,-18_SH30_OU01_.jpg" />

						<img
							src="http://ecx.images-amazon.com/images/I/51nRHgj%2BoGL._SL160_PIsitb-sticker-arrow-dp,TopRight,12,-18_SH30_OU01_.jpg" />

						<img
							src="http://ecx.images-amazon.com/images/I/41DeCVMleRL._SL160_PIsitb-sticker-arrow-dp,TopRight,12,-18_SH30_OU01_.jpg" />

						<img
							src="http://ecx.images-amazon.com/images/I/31on8fbW-kL._SL160_.jpg" />

						<img
							src="http://ecx.images-amazon.com/images/I/51uLpGcI9WL._SL160_PIsitb-sticker-arrow-dp,TopRight,12,-18_SH30_OU01_.jpg" />

						<img
							src="http://ecx.images-amazon.com/images/I/517jm8UYJrL._SL160_PIsitb-sticker-arrow-dp,TopRight,12,-18_SH30_OU01_.jpg" />

						<img
							src="http://ecx.images-amazon.com/images/I/51-LoGDlaKL._SL160_PIsitb-sticker-arrow-dp,TopRight,12,-18_SH30_OU01_.jpg" />

						<img
							src="http://ecx.images-amazon.com/images/I/51rQ9b7862L._SL160_.jpg" />

						<img
							src="http://ecx.images-amazon.com/images/I/418PXu00dFL._SL160_PIsitb-sticker-arrow-dp,TopRight,12,-18_SH30_OU01_.jpg" />

						<img
							src="http://ecx.images-amazon.com/images/I/51J709jg8WL._SL160_PIsitb-sticker-arrow-dp,TopRight,12,-18_SH30_OU01_.jpg" />

						<img
							src="http://ecx.images-amazon.com/images/I/417dHS4K5tL._SL160_PIsitb-sticker-arrow-dp,TopRight,12,-18_SH30_OU01_.jpg" />

						<img
							src="http://ecx.images-amazon.com/images/I/51MlMXof%2B-L._SL160_PIsitb-sticker-arrow-dp,TopRight,12,-18_SH30_OU01_.jpg" />

						<img
							src="http://ecx.images-amazon.com/images/I/51-sbyyAWVL._SL160_.jpg" />

						<img
							src="http://ecx.images-amazon.com/images/I/51W7WPbN5NL._SL160_.jpg" />

						<img
							src="http://ecx.images-amazon.com/images/I/419hsSrBWeL._SL160_PIsitb-sticker-arrow-dp,TopRight,12,-18_SH30_OU01_.jpg" />

						<img
							src="http://ecx.images-amazon.com/images/I/51DVjmULtGL._SL160_PIsitb-sticker-arrow-dp,TopRight,12,-18_SH30_OU01_.jpg" />

						<img
							src="http://ecx.images-amazon.com/images/I/51lSEe8Uw%2BL._SL160_.jpg" />


					</div>




				</div>
			</div>


		</div>

	</div>




</body>
</html>
